<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findData" />

    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '5px' }">
      <div style="display: flex">
        <div>
          <h1 class="f16 mr24">选择型体</h1>
          <Table :tableHeader="tableHeader" :tableData="tableData" :outTableHeight="100" />
        </div>
        <div class="mr10 ml10">
          <h1 class="f16 mr24">选择颜色</h1>
          <Table :tableHeader="tableHeader2" :tableData="tableData2" :outTableHeight="100" />
        </div>
        <div>
          <h1 class="f16 mr24">针车工序明细档</h1>
          <Table :tableHeader="tableHeader3" :tableData="tableData3" :outTableHeight="100" />
        </div>
      </div>
      <PageModule :PageData="{ pageSizeShow: true }" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'NeedleCarUnitPriceInquiryLt'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import type { formListType } from '@/components/Find/index.vue'
import { ref } from 'vue'

const formList = ref<any>([
  {
    type: 'select',
    selectLabel: '',
    selectP: '型体',
    selectValue: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入冲刀号',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '退出'
  }
])

const findData = () => {}

// 表格数据
const tableData = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader = ref([
  {
    label: '型体',
    prop: 'slipDate'
  },
  {
    label: '冲刀号',
    prop: 'dutyDeptName'
  }
])

const tableHeader2 = ref([
  {
    label: '颜色',
    prop: 'slipNo'
  },
  {
    label: '颜色代号',
    prop: 'slipNo'
  },
  {
    label: '图片',
    fixed: true,
    prop: 'slipNo'
  }
])
const tableHeader3 = ref([
  {
    label: '序号',
    prop: 'slipNo'
  },
  {
    label: '作业流程',
    prop: 'slipNo'
  },
  {
    label: '单价',
    prop: 'slipNo'
  },
  {
    label: '备注',
    prop: 'slipNo'
  }
])

const handleSizeChange = (val: number) => {}
const handleCurrentChange = (val: number) => {}
const tableData2 = ref([])
const tableData3 = ref([])
</script>

<style lang="less" scoped>
h1 {
  font-size: 14px;
}
</style>
